<template>
	<div  :style="'padding: 5px;'" >
		<div class="a-tab">
			<div class="a-tab_item" @click="tabNacCiick(index,item)"
				:class="{'bgc':static == index}"
				v-for="(item,index) in tabNac" :key="index">
				{{item.name || item.ksName}}
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'aTab',
		props: {
			tabNac: {
				type: Array,
				default: () => []
			},
			static:{
				type:[Number,String],
				default:0
			}
		},
		data() {
			return {

			}
		},
		computed:{
			tabNavC(){
				return {
					0:this.$store.state.print.tabNav,
					1:this.$store.state.print.tabNav1,
					2:this.$store.state.print.setup
				}
			}
		},
		methods: {
			tabNacCiick(i,item) {
				this.$emit('tabNacCiick', i,item)
			}
		}
	}
</script>

<style scoped>
	.a-tab {
		background: #f2f2f2;
		display: flex;
		flex-wrap: wrap;
	}
	.bgc{
		background: #ea4410;color:#ffffff;
	}
	.a-tab_item {
		text-align: center;
		cursor: pointer;
		padding: 10px 15px;
		font-size: 16px;
	}

  .a-tab_item:hover {
    background: #ea4410;color:#ffffff;
  }
</style>
